<template>
<div>
  <div class="my-header">
      <div class="my-info">
          <img src="@/assets/logo.png">
          <p class="nickname">
              <a href="" style="color:#fff">韩磊</a>
          </p>
      </div>
  </div>
  <group title="账户信息">
      <cell title="账户余额" :value="mydata.yue + '元'"></cell>
      <cell title="本周免费剩余" :value="mydata.yue + '条'"></cell>
  </group>
</div>
</template>

<script>
import {Group, Cell, Grid, GridItem } from 'vux'
export default {
  components: {
    Grid, 
    GridItem,
    Group,
    Cell
  },
  name: 'My',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      mydata: {
        yue: 3
      }
    }
  },
  mounted: function () {
    this.doReload();
  },
  methods: {
    doReload: function() {
      var that=this;
      //that.$store.commit('updateLoadingStatus', {isLoading: true});
      that.$http.get(GV.ROOT + 'user/center/ajax_index.html',{
        params: {
        }
      }).then(function(response){
          // 响应成功回调
          console.log(response.data);
          //that.$store.commit('updateLoadingStatus', {isLoading: false});
      }, function(response){
          // 响应错误回调
          //router.push('/login')
      });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.mygrid{
  height:150px;
  background-color: #35495e;
  border:none;
}
.my-header {
    background: #35495e;
    background-size: cover;
    min-height: 150px;
    position: relative;
}
.my-info {
    position: relative;
    padding: 20px 0;
    width: 100%;
    bottom: 0;
    text-align: center;
    vertical-align: middle;
}
.my-info img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border:1px solid #ccc; 
}
</style>
